<template>
	<view class="character-avatar">
		<svg xmlns="http://www.w3.org/2000/svg" width="53" height="53" viewBox="0 0 53 53" fill="none">
			<path d="M22.1744 51.9924L1 30.821V22.1865L22.1821 1H30.818L52 22.179V30.8134L30.818 51.9924H22.1744Z" fill="url(#paint0_linear_436_9)" stroke="#E1E3CC" stroke-width="2" />
			<path opacity="0.3" d="M30.4366 47.4941L23.1819 47.4998L5.80939 29.5501V23.4559L23.1821 5.5H30.0983L47.8094 23.7031V29.5441L30.4366 47.4941Z" fill="url(#paint1_linear_436_9)" stroke="#E1E3CC" />
			<defs>
				<linearGradient id="paint0_linear_436_9" x1="26.5" y1="0" x2="26.5" y2="53" gradientUnits="userSpaceOnUse">
					<stop stop-color="#1D1D1F" />
					<stop offset="1" stop-color="#333337" />
				</linearGradient>
				<linearGradient id="paint1_linear_436_9" x1="26.8094" y1="5" x2="26.8094" y2="47" gradientUnits="userSpaceOnUse">
					<stop stop-color="#494A45" />
					<stop offset="1" stop-color="#494A42" />
				</linearGradient>
			</defs>
		</svg>
		<image class="avatar" src="https://mp-a667b617-c5f1-4a2d-9a54-683a67cff588.cdn.bspapp.com/dz/avatar-0.png" mode="widthFix" v-if="avatar"></image>
		<image class="avatar-no" src="/static/images/character/avatar-no.svg" mode="widthFix" v-else></image>
	</view>
</template>
<script setup>
	defineProps({
		avatar: {
			type: [String, null, undefined],
			default: ''
		}
	})
</script>
<style scoped lang="scss">
	.character-avatar {
		position: relative;
		.avatar {
			position: absolute;
			left: 50%;
			bottom: 10px;
			z-index: 9;
			width: 50px;
			transform: translateX(-50%);
		}
		.avatar-no {
			position: absolute;
			width: 46px;
			left: 50%;
			bottom: 10px;
			transform: translateX(-50%);
		}
	}
</style>